date: 2023-10-06
Type: Cours
Projet: Blindcode
Cours: InformatiqueIntroduction à Bootstrap
Bootstrap est un framework CSS open source créé par Twitter ( devenu X maintenant). Il est conçu pour simplifier le processus de développement web en fournissant une base de styles et de composants réutilisables. Bootstrap est devenu l'un des frameworks les plus populaires pour la création de sites web réactifs et mobiles. Nous allons en apprendre un peu plus à ce sujet au travers de ce cours.
Bootstrap a été initialement développé en 2010 par Twitter (X) sous le nom de "Twitter Blueprint." Il a ensuite été renommé Bootstrap et publié en open source en 2011. Depuis lors, Bootstrap est devenu un projet open source majeur, avec une grande communauté de développeurs et de contributeurs.
Gain de Temps : Bootstrap offre une variété de composants prêts à l'emploi, tels que des boutons, des formulaires, des barres de navigation, des modales, etc. Cela permet de gagner du temps dans le développement.
Réactivité : Bootstrap est conçu pour créer des sites web réactifs qui s'adaptent automatiquement aux différents écrans, des ordinateurs de bureau aux smartphones.
Consistance : Bootstrap garantit une cohérence visuelle dans votre projet, ce qui est essentiel pour une expérience utilisateur de qualité.
Personnalisable : Bien que Bootstrap fournisse des styles par défaut, il est facilement personnalisable pour s'adapter à votre design spécifique.
Grille (Grid System) : Bootstrap utilise un système de grille basé sur 12 colonnes pour la mise en page, ce qui facilite la création de mises en page réactives.
Composants Réactifs : Bootstrap offre une grande variété de composants prêts à l'emploi, tels que des boutons, des formulaires, des carrousels, des alertes, des onglets, et bien plus encore.
Styles de Base : Il fournit des styles de base pour la typographie, les couleurs, les tables, les images, et autres éléments de base.
Thèmes (Themes) : Vous pouvez personnaliser l'apparence de votre site en utilisant des thèmes Bootstrap ou en créant votre propre thème.
JavaScript : Bootstrap inclut des composants JavaScript interactifs, comme des modales, des carrousels, et des onglets, qui peuvent être activés avec un simple code HTML et JavaScript.
Pour utiliser Bootstrap, vous devez inclure les fichiers CSS et JavaScript de Bootstrap dans votre projet, soit en les téléchargeant depuis le site officiel de Bootstrap, soit en utilisant un gestionnaire de paquets comme npm. Une fois inclus, vous pouvez commencer à utiliser les classes Bootstrap dans votre code HTML pour appliquer des styles et des composants.
Voici un exemple simple de l'utilisation de Bootstrap pour créer un bouton :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Site Bootstrap</title>
<!-- Inclure les fichiers CSS et JavaScript de Bootstrap -->
<link href="chemin/vers/bootstrap.css" rel="stylesheet">
<script src="chemin/vers/bootstrap.js"></script>
</head>
<body>
<!-- Utiliser une classe Bootstrap pour le bouton -->
<button class="btn btn-primary">Cliquez ici</button>
</body>
</html>
créé le 2023-10-06 à 09:46